<template>
    <view class="home">
        <view class="title">工作台</view>
        <view class="list-list" v-if="list && list.length > 0">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="list-title">
                    <text class="l-title">
                        {{ item.menuName }}
                        <view class="bottom-line"></view>
                    </text>
                </view>
                <view class="list-item">
                    <view
                        class="sub-item"
                        v-for="(subItem, subIndex) in item.children"
                        :key="subIndex"
                        @click="navTo(subItem.path)"
                    >
                        <view class="img">
                            <image :src="subItem.icon"></image>
                        </view>
                        <view class="text">{{ subItem.menuName }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getUserMenus } from "@/api/index.js";
export default {
    components: {},
    data() {
        return {
            list: [],
            shipList: [
                {
                    menuName: "主动安全",
                    children: [
                        {
                            menuName: "船舶动态",
                            icon: "../../../static/image/home/cbdt.png",
                            path: "/subShip/map/index",
                        },
                        {
                            menuName: "重点部位",
                            icon: "../../../static/image/home/zdbw.png",
                            path: "/subShip/alarm/index",
                        },
                        {
                            menuName: "运营调度",
                            icon: "../../../static/image/home/yydd.png",
                            path: "/subShip/dispatch/index",
                        },
                        {
                            menuName: "通讯录",
                            icon: "../../../static/image/home/txl.png",
                            path: "/subShip/call/index",
                        },
                    ],
                },
            ],
            // list: [{
            // 		title: '机务管理',
            // 		items: [{
            // 			title: '船舶保养',
            // 			icon: '../../../static/image/home/maintenance_01.png',
            // 			path: '/subMaintenance/maintain/index'
            // 		}, {
            // 			title: '船舶维修',
            // 			icon: '../../../static/image/home/maintenance_02.png',
            // 			path: '/subMaintenance/repair/index'
            // 		}, {
            // 			title: '物资领用',
            // 			icon: '../../../static/image/home/maintenance_03.png',
            // 			path: '/subMaintenance/requisition/index'
            // 		}, {
            // 			title: '物资请购',
            // 			icon: '../../../static/image/home/maintenance_04.png',
            // 			path: '/subMaintenance/purchase/index'
            // 		}, ]
            // 	},
            // 	{
            // 		title: '班组管理',
            // 		items: [{
            // 			title: '班排计划',
            // 			icon: '../../../static/image/home/class_01.png',
            // 			path: '/subTeam/plan'
            // 		}, {
            // 			title: '考勤记录',
            // 			icon: '../../../static/image/home/class_02.png',
            // 			path: '/subTeam/index'
            // 		}, {
            // 			title: '实时监控',
            // 			icon: '../../../static/image/home/class_03.png',
            // 			path: '/subPages/videoList/index'
            // 		}]
            // 	},
            // 	{
            // 		title: '运营效益分析',
            // 		items: [{
            // 			title: '渡运安全全景',
            // 			icon: '../../../static/image/home/operate_01.png',
            // 			path: '/subReport/safe/index'
            // 		}, {
            // 			title: '机务管理全景',
            // 			icon: '../../../static/image/home/operate_02.png',
            // 			path: '/subReport/analysis/index'
            // 		}, {
            // 			title: '站区运营全景',
            // 			icon: '../../../static/image/home/operate_03.png',
            // 			path: '/subReport/area/index'
            // 		}]
            // 	},
            // 	{
            // 		title: '流程办理',
            // 		items: [{
            // 			title: '我发起的',
            // 			icon: '../../../static/image/home/operate_01.png',
            // 			path: '/subProgress/index'
            // 		}, {
            // 			title: '我审批的',
            // 			icon: '../../../static/image/home/operate_02.png',
            // 			path: '/subProgress/index?checkTab=1'
            // 		}]
            // 	}
            // ]
        };
    },
    created() {},
    mounted() {},
    onShow() {
        this.list = [];
        this.getList();
    },

    methods: {
        navTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
        getList() {
            getUserMenus({
                system: "ferryApp",
            })
                .then((res) => {
                    const { data } = res;
                    if (data && data.length > 0) {
                        this.list = [...data, ...this.shipList];
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.home {
    background: url("@/static/image/home/home_bg_nav.png") no-repeat center top;
    background-size: 100% auto;
    width: 100vw;
    min-height: 100vh;

    .title {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        line-height: 48rpx;
        padding: 110rpx 0 36rpx 0;
        text-align: center;
    }

    .list-list {
        margin: 0 30rpx;

        .item {
            margin: 30rpx 0;

            .list-title {
                .l-title {
                    height: 42rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #323232;
                    position: relative;
                    margin-bottom: 18rpx;

                    .bottom-line {
                        height: 12rpx;
                        background: rgba(54, 133, 230, 0.3);
                        bottom: 6rpx;
                        position: absolute;
                        left: 0;
                        width: 100%;
                    }
                }
            }

            .list-item {
                display: flex;
                padding: 31rpx 0 22rpx 0;

                .sub-item {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .img {
                        width: 80rpx;
                        height: 80rpx;
                        margin-bottom: 8rpx;

                        image {
                            width: 80rpx;
                            height: 80rpx;
                        }
                    }

                    .text {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #303133;
                        line-height: 37rpx;
                    }
                }
            }
        }
    }
}
</style>
